<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>Display Social Media Icons beautifully using CSS3</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
	<h1>Social Icons Display<small>Using CSS3</small></h1>
	<h2><a href="http://www.marcofolio.net/" title="Visit Marcofolio.net">Marcofolio.net</a></h2>
	<div id="content">
		<p>Simply hover over the social media icons below the see the beautiful effect. The first example is created using pure CSS, and can only be fully viewed using <code>-webkit</code> based browsers (like Chrome and Safari) and Firefox 4. Animations are done using CSS.</p>
		<p>The second example uses the same HTML, some of the CSS from the first example but uses <a href="http://jquery.com/" title="jQuery">jQuery</a> for the animations. This is added for all non-<code>webkit</code> browsers (like older versions of Firefox and Opera).</p>
		<p>The idea is an improved way on how <a href="http://pubwich.org/" title="Pubwich">Pubwich</a> displays his social media icons. The icons used are created by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" title="Social Media Icons">Paul Robert Lloyd</a>.</p>
		
		<h3>Pure CSS3</h3>
		<!-- Social Media Buttons - CSS3 -->
		<ul class="social" id="css3">
			<li class="delicious">
				<a href="http://www.delicious.com/"><strong>Delicious</strong></a>
			</li>
			<li class="digg">
				<a href="http://digg.com/"><strong>Digg</strong></a>
			</li>
			<li class="facebook">
				<a href="http://www.facebook.com/"><strong>Facebook</strong></a>
			</li>
			<li class="flickr">
				<a href="http://www.flickr.com/"><strong>Flickr</strong></a>
			</li>
			<li class="linkedin">
				<a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
			</li>
			<li class="reddit">
				<a href="http://www.reddit.com/"><strong>Reddit</strong></a>
			</li>
			<li class="rss">
				<a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
			</li>
			<li class="twitter">
				<a href="http://twitter.com/"><strong>Twitter</strong></a>
			</li>
		</ul>
		<!-- /Social Media Buttons - CSS3 -->
		
		<h3>jQuery</h3>
		<!-- Social Media Buttons - jQuery -->
		<ul class="social" id="jquery">
			<li class="delicious">
				<a href="http://www.delicious.com/"><strong>Delicious</strong></a>
			</li>
			<li class="digg">
				<a href="http://digg.com/"><strong>Digg</strong></a>
			</li>
			<li class="facebook">
				<a href="http://www.facebook.com/"><strong>Facebook</strong></a>
			</li>
			<li class="flickr">
				<a href="http://www.flickr.com/"><strong>Flickr</strong></a>
			</li>
			<li class="linkedin">
				<a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
			</li>
			<li class="reddit">
				<a href="http://www.reddit.com/"><strong>Reddit</strong></a>
			</li>
			<li class="rss">
				<a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
			</li>
			<li class="twitter">
				<a href="http://twitter.com/"><strong>Twitter</strong></a>
			</li>
		</ul>
		<!-- /Social Media Buttons - jQuery -->
		
	</div>
</div>
</body>
</html>